<template>
  <div>
    <hdb :isShow="isShow" @scroll="scroll" @ding="ding"></hdb>
  </div>
</template>

<script>
import hdb from "@/components/hdb";
let times;
export default {
  name: "",
  components: {
    hdb,
  },
  data() {
    return {
      isShow: false,
      dom: null,
    };
  },
  created() {},
  mounted() {},
  methods: {
    scroll(e) {
      this.dom = e.target;
      this.isShow = e.target.scrollTop >= 400;
    },
    ding() {
      times = setInterval(() => {
        this.dom.scrollTop -= 10;
        if (this.dom.scrollTop <= 0) {
          this.dom.scrollTop = 0;
          clearInterval(times);
        }
      }, 20);
    },
  },
};
</script>
<style scoped lang="scss"></style>
